<template>
    <div class="photo-container">
        <h3>{{imgInfo.title}}</h3>
        <p class="subtitle">
            <span>发表时间: {{ imgInfo.add_time | formatTime }}</span>
            <span>点击: {{ imgInfo.click }} 次</span>
        </p>
        <hr>
        
        <!-- <img class="preview-img" v-for="(item, index) in list" :src="item.src"
        height="100" @click="$preview.open(index, list)"
        > -->
        <vue-preview :slides="imgUrls"></vue-preview>


        <!-- <p>{{imgInfo.content}}</p> -->
        <div class="content" v-html="imgInfo.content"></div>

        <comment-box :id="this.id"></comment-box>
    </div>
</template>


<script>
import comment from '../subcomponents/Comment.vue'

export default {
    data() {
        return {
            id: this.$route.params.id,
            imgInfo: {},    // 图片信息
            imgUrls: []     // 图片路径
        }
    },
    created() {
        // 获取图片详情和路径信息
        this.getImageInfo(this.id);
        this.getImageUrls(this.id);
    },
    methods: {
        // 获取图片信息
        getImageInfo(id) {
            this.$http.get('api/getimageinfo/' + id).then(result => {
                if (result.body.status === 0) {
                    this.imgInfo = result.body.message[0];
                }
            })
        },

        // 获取图片路径信息
        getImageUrls(id) {
            this.$http.get('api/getthumimages/' + id).then(result => {
                if (result.body.status === 0) {
                    // this.imgUrls = result.body.message;
                    var imgArr = [];
                    result.body.message.forEach(element => {
                        imgArr.push({
                            src: element.src,
                            msrc: element.src,
                            alt: 'picture1',
                            title: '',
                            w: 600,
                            h: 400
                        })
                    });

                    this.imgUrls = imgArr;
                }
            })
        }

    },
    components: {
        'comment-box': comment
    }
}
</script>


<style lang="scss" scoped>
.photo-container {
    padding: 3px;

    h3 {
        color: #26a2ff;
        font-size: 15px;
        text-align: center;
        margin: 15px 0;
    }

    .subtitle {
        display: flex;
        justify-content: space-between;
        font-size: 13px;
    }

    .content {
        font-size: 13px;
        line-height: 30px;
    }
}


</style>
